<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <style type="text/css">
        
        form span{
            color: #0d0e0b !important;
            font-size: 18px;
        }
        form input{
            border:1px solid #c1c1c1;
            line-height: 1.6em;
            width: 245px;
            height: 1.8em;
        }
        form button{
            /*border-style: solid;*/
            border: 1px solid #aaa;
            background-color: white;
            width: 4em;
            height: 2em;

        }
        button:hover{
            border: 1px solid #3c3a3ac2;

        }
        li{
            list-style: none;
            text-align: center;
            margin: 0 auto;
        }

    </style>

</head>
<body>
     <form onkeydown="if(event.keyCode==13){return false;}">
        <span>标题：</span><input  name="title"  placeholder="标题(必填)"><br/>
       <span>内容：</span> 
        <input class="editor" name="content" id="content" />
        <span>作者：</span><input  name="author"  placeholder="作者(必填)">&emsp;&emsp;
        <span>标签：</span><input  name="tags"  placeholder="标签(必填)"><br/><br/>
         <li>
         <button type="button" id="cancle_btn" onclick="window.location.href='{{url_for("index.index")}}'">首页</button>&emsp;&emsp;
         <button type="button" id="submit_btn">提交</button>
             
         </li>

    </form>
    <script type="text/javascript">
        
        
    </script>

    <script src="{{ url_for('static', filename='tinymce/js/tinymce/tinymce.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/tinymce_setup.js') }}"></script>
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <script type="text/javascript">
        
        $(function(){
            var $btn  = $('#submit_btn');
            $btn.on('click', function(){

                // 自定义的元素必须在插件前取值，
                var title = $('input[name="title"]').val()
                var author = $('input[name="author"]').val()
                var tags = $('input[name="tags"]').val()

                // 获取纯文本内容 4部曲 （js 不能直接获取）
                // ###########################################################################
                var activeEditor = tinymce.activeEditor;
                var editBody = activeEditor.getBody();
                activeEditor.selection.select(editBody);
                var content=activeEditor.selection.getContent( { 'format' : 'text' } );
                // ###########################################################################
                console.log('title:',title)
                console.log('tags:',tags)
                console.log('author:',author)
                console.log('content:',content)


                if((title.length>0) && (content.length>0) && (tags.length>0) && (author.length>0)){
                    $.ajax({
                        type:'post',
                        typeType:'json',
                        data:{
                            'tags':tags,
                            'title':title,
                            'author':author,
                            'content':content
                        },
                        url:'{{url_for("editor.editor")}}',
                        success:function(data){
                            alert('添加成功！')
                        },
                        error: function(re){
                            alert("添加失败！")
                        }
                    })
                }else{
                    alert('请填写完整！')
                }

            })
        })
    </script>


</body>
</html>
